<script setup>

  import router from "./router/index.js";

  function paramTest() {
    // router.push('/haha/222/zhangsan/188')
    router.push(
        {
          name: 'Haha',// 访问Haha组件，由path中的name指定的。
          params: {
            id: 888,
            name: 'wangwu',
            age: 202
          }

        }
    )
  }

  function helloQuery() {
    // query传参1
    // router.push('/hello2?id=1&name=aaa')

    // 或者 query传参2
    router.push({
      path: '/hello2',
      query: {
        id: 2,
        name: 'lisi',
        age: 18
      }
    })
  }
</script>


<template>
<!--
  <a href="/">首页</a>
  <a href="/Hello">Hello</a>
  <a href="/Haha">Haha</a>
-->

  <router-link to="/">首页</router-link>
  <router-link to="/hello">Hello</router-link>
  <router-link to="/hello2?id=1&name=zhangsan">Hello2</router-link>
  <router-link :to="{
    path: '/hello2',
    query: {
      id: 2,
      name: 'lisi',
      age: 18
    }
  }">Hello2对象</router-link>
  <button @click="helloQuery">按钮query传参</button>
<!--  <router-link to="/haha">Haha</router-link>-->
  <!-- param传参 -->
  <router-link to="/haha/111/zhangsan/18">Haha111</router-link>
  <router-link :to="{
    name: 'Haha', // 访问Haha组件，由path中的name指定的。
    params: {
      id: 222,
      name: 'lisi',
      age: 20
    }
  }">
  对象传参
  </router-link>
  <button @click="paramTest">param传参</button>
  <router-link to="/user/007">用户中心</router-link>
  <hr/>
  <router-view></router-view>


<!-- 1. 整合vue-router -->
<!-- 2. 配置vue-router
      2.1 配置路由表
      2.2 创建路由器
 -->
<!-- 3. Vue实例使用router -->
<!-- 4. 配置router-link He router-view -->
</template>

<style scoped>
a {
  margin-left: 10px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
